<script setup>
import MyTable from '@/components/MyTable.vue';
import StickPopup from '@/components/StickPopup.vue';
import { ref, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue'
const columns = [
    {
        title: '客户简称',
        key: 'name',
    },
    {
        title: '保管人',
        key: 'custodian',
    },
    {
        title: '物品类型',
        key: 'objtype',
    },
    {
        title: '物品名称',
        key: 'objname',
    },
        {
        title: '数量',
        key: 'quantity',   
    },
        {
        title: '单位',
        key: 'unit'
    },
        {
        title: '存放位置',
        key: 'position',
    },
        {
        title: '备注',
        key: 'remark',
    },
        {
        title: '操作',
        key: 'operation'
    },
];
const mockData = ref([]);
const loading = ref(true);
const data1 = ref(0);
const data2 = ref(0);
const data3 = ref(0);
const data4 = ref(0);

const activeName = ref('first')
const handleClick = (tab, event) => {
    console.log(tab, event);

    loading.value = true
    setTimeout(() => {
        if(activeName.value === 'first') {
            mockData.value = []
            loading.value = false
            return;
        }
        mockData.value = [
            {
                name: '张三',
                custodian: '13812345678',
                objtype: '非带张客户',
                objname: '13812345678',
                quantity: '已代账',
                unit: 'A',
                position: '北京市朝阳区',
                remark: '13812345678',
                operation: '13812345678'    
            },
            {
                name: '张三',
                custodian: '13812345678',
                objtype: '非带张客户',
                objname: '13812345678',
                quantity: '已代账',
                unit: 'A',
                position: '北京市朝阳区',
                remark: '13812345678',
                operation: '13812345678' 
            },
            {
                name: '张三',
                custodian: '13812345678',
                objtype: '非带张客户',
                objname: '13812345678',
                quantity: '已代账',
                unit: 'A',
                position: '北京市朝阳区',
                remark: '13812345678',
                operation: '13812345678' 
            }
        ]
        loading.value = false
    }, 2000)
}
onMounted(() => {
    setTimeout(() => {
        mockData.value = [
            {
                name: '张三',
                custodian: '13812345678',
                objtype: '非带张客户',
                objname: '13812345678',
                quantity: '已代账',
                unit: 'A',
                position: '北京市朝阳区',
                remark: '13812345678',
                operation: '13812345678' 
            },
            {
                name: '张三',
                custodian: '13812345678',
                objtype: '非带张客户',
                objname: '13812345678',
                quantity: '已代账',
                unit: 'A',
                position: '北京市朝阳区',
                remark: '13812345678',
                operation: '13812345678' 
            },
            {
                name: '张三',
                custodian: '13812345678',
                objtype: '非带张客户',
                objname: '13812345678',
                quantity: '已代账',
                unit: 'A',
                position: '北京市朝阳区',
                remark: '13812345678',
                operation: '13812345678' 
            }
        ]
        loading.value = false
    }, 2000)
})
</script>
<template>
    <div class="item-handover">
        <!-- <div class="top1"></div> -->
        <el-tabs v-model="activeName" class="demo-tab" @tab-click="handleClick">
            <el-tab-pane label="物品仓库" name="first">
                <div class="table-area">
                    <div class="top-filter">
                        <div class="top-filter-left">
                            <div class="top-filter-search">
                                <el-input
                                    v-model="input1"
                                    placeholder="请输入客户简称/存放位置/备注"
                                    >
                                    <template #append>
                                        <el-button :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                            <div class="top-filter-search">
                                <el-input
                                    v-model="input2"
                                    placeholder="请选择物品类型/名称"
                                    >
                                    <template #append>
                                        <el-button :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                            <stick-popup>
                                <template #show>
                                    <div class="top-filter-btn">
                                        <div class="top-filter-btn-label">
                                            更多
                                        </div>
                                        <div class="top-filter-btn-icon">
                                            <Operation />
                                        </div>
                                    </div>
                                </template>
                                <template #content>
                                    <!-- 筛选表单 -->
                                    <div class="top-filter-form">
                                        <el-form :model="form" label-width="100px">
                                            <el-form-item label="联系人">
                                                <el-input-tag></el-input-tag>
                                            </el-form-item>
                                            <el-form-item label="客户标签">
                                                <el-input></el-input>
                                            </el-form-item>
                                            <el-form-item label="所属部门">
                                                <el-input></el-input>
                                            </el-form-item>
                                            <el-form-item label="行业分类">
                                                <el-input></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </template>
                                <template #footer>
                                    <div class="top-filter-operate">
                                        <el-button type="primary">确定</el-button>
                                        <el-button type="text">重置</el-button>
                                    </div>
                                </template>
                            </stick-popup>
                        </div>
                        <div class="top-filter-right">
                            <el-button type="primary">接受物品</el-button>
                            <el-button>归还物品</el-button>
                            <el-dropdown split-button @click="">
                                导入
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>导出</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                            <el-dropdown split-button @click="" type="primary">
                                批量操作
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item>批量更换保管人</el-dropdown-item>
                                        <el-dropdown-item>批量更改存放位置</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>
                            </el-dropdown>
                        </div>
                    </div>
                    <!-- <div class="table-area-tab">
                        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                            <el-tab-pane label="全部客户" name="first"></el-tab-pane>
                            <el-tab-pane label="代理记账报税" name="second"></el-tab-pane>
                            <el-tab-pane label="其他财税服务" name="third"></el-tab-pane>
                            <el-tab-pane label="人资社保" name="fourth"></el-tab-pane>
                            <el-tab-pane label="工商服务" name="fifth"></el-tab-pane>
                            <el-tab-pane label="资质办理" name="sixth"></el-tab-pane>
                            <el-tab-pane label="知识产权" name="seventh"></el-tab-pane>
                        </el-tabs>
                    </div> -->
                    <div class="table-area-table">
                        <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true" :show-operation="false">
                            <!-- <template #data-age="scope">
                                <span>{{ scope.data }}</span>
                            </template>
                            <template #filter-age>
                                <span>年龄213123123123123</span>
                                <el-icon class="filter-icon"></el-icon>
                            </template>
                            <template #filter-address>
                                <span>地址12恶趣味委屈委屈12312312312312</span>
                                <el-icon class="filter-icon"></el-icon>
                            </template>
                            <template #operation>
                                <span><button>删除</button></span>
                            </template> -->
                        </my-table>
                    </div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="交接记录" name="second">
                <div class="table-blue" >
                    <div>归还待我确认{{ data1 }}个</div>
                    <p class="line"></p>
                    <div>接收待我确认{{ data2 }}个</div>
                    <p class="line"></p>
                    <div>接收待我提交{{ data3 }}个</div>
                    <p class="line"></p>
                    <div>接收不通过{{ data4 }}个</div>                
                </div>
                <div class="table-area">
                    <div class="top-filter">
                        <div class="top-filter-left">
                            <el-tabs v-model="activeName1"  @tab-click="handleClick1">
                                <el-tab-pane label="全部" name="1"></el-tab-pane>
                                <el-tab-pane label="接收物品" name="2"></el-tab-pane>
                                <el-tab-pane label="归还物品" name="3"></el-tab-pane>
                            </el-tabs>
                            <div class="top-filter-search">
                                <el-input
                                    v-model="input1"
                                    placeholder="请输入客户简称/编号/快递单号"
                                    >
                                    <template #append>
                                        <el-button :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                            <div class="top-filter-search">
                                <el-input
                                    v-model="input2"
                                    placeholder="请选择物品类型/名称"
                                    >
                                    <template #append>
                                        <el-button :icon="Search" />
                                    </template>
                                </el-input>
                            </div>
                            <stick-popup>
                                <template #show>
                                    <div class="top-filter-btn">
                                        <div class="top-filter-btn-label">
                                            更多
                                        </div>
                                        <div class="top-filter-btn-icon">
                                            <Operation />
                                        </div>
                                    </div>
                                </template>
                                <template #content>
                                    <!-- 筛选表单 -->
                                    <div class="top-filter-form">
                                        <el-form :model="form" label-width="100px">
                                            <el-form-item label="联系人">
                                                <el-input-tag></el-input-tag>
                                            </el-form-item>
                                            <el-form-item label="客户标签">
                                                <el-input></el-input>
                                            </el-form-item>
                                            <el-form-item label="所属部门">
                                                <el-input></el-input>
                                            </el-form-item>
                                            <el-form-item label="行业分类">
                                                <el-input></el-input>
                                            </el-form-item>
                                        </el-form>
                                    </div>
                                </template>
                                <template #footer>
                                    <div class="top-filter-operate">
                                        <el-button type="primary">确定</el-button>
                                        <el-button type="text">重置</el-button>
                                    </div>
                                </template>
                            </stick-popup>
                        </div>
                        <div class="top-filter-right">
                            <el-button type="primary">批量操作</el-button>
                        </div>
                    </div>
                    <div class="table-area-table">
                        <my-table :loading="loading" :columns="columns" :dataSource="mockData" :showIndex="true" :show-operation="false">
                            <!-- <template #data-age="scope">
                                <span>{{ scope.data }}</span>
                            </template>
                            <template #filter-age>
                                <span>年龄213123123123123</span>
                                <el-icon class="filter-icon"></el-icon>
                            </template>
                            <template #filter-address>
                                <span>地址12恶趣味委屈委屈12312312312312</span>
                                <el-icon class="filter-icon"></el-icon>
                            </template>
                            <template #operation>
                                <span><button>删除</button></span>
                            </template> -->
                        </my-table>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        
        
    </div>
</template>
<style lang="less" scoped>
.item-handover {
    width: 100%;
    height: 100%;
    background-color: rgb(239,239,239);
    overflow: auto;
    .top1 {
        height: 10%;
        background-color: #fff;
    }
    .demo-tab {
        :deep(.el-tabs__item) {
             margin-left: 30px;    
            padding: 0; 
            font-size: medium;
        }
        :deep(.el-tabs__header) {
            background-color: #fff; 
            height: 43px;
        }
    }

    
}


.el-tab--right .el-tab__content,
.el-tab--left .el-tab__content {
  height: 100%;
}
.top-filter {
    width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    padding: 0 20px;
    box-sizing: border-box;
    position: sticky;
    top: 0;
    z-index: 9;
}
.top-filter-left {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 10px;
    .top-filter-btn {
        width: 80px;
        height: 30px;
        border-radius: 5px;
        border: 1px solid #ccc;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        user-select: none;
        .top-filter-btn-icon {
            width: 20px;
            height: 20px;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    .top-filter-search {
        width: 200px;
    }
}
.line {
    background: #c1d4ea;
    height: 24px;
    width: 2px;
}
.table-blue {
    display: flex;
    justify-content: space-around;
    width: 94%; 
    background-color: #e4f1ff;
    border: 1px solid #c7e1ff;
    padding-top: 1%;
    padding-bottom: 1%;
    margin-left: 3%;
    box-shadow: var(--el-border-color-light) 0px 0px 10px;
}
.table-area {
    width: 94%;
    margin: 20px auto;
    box-shadow: 0 0 10px 0 #ddd;
    background-color: #fff;
    padding: 10px 20px;
    box-sizing: border-box;
    .table-area-tab {
        width: 100%;
        box-sizing: border-box;
    }
    .table-area-table {
        width: 100%;
        box-sizing: border-box;
    }
}

.top-filter-form, .top-filter-operate {
    width: 400px;
    background-color: #fff;
}
</style>
